<template>
  <div class="homePage">
    <div v-for="(item,index) in tableList" :key="index" class="item">
      <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px' }">
        <img :src="tableImgList[getRandomInt(0,tableImgList.length-1)]" class="image">
        <div style="padding: 14px;">
          <div class="content">{{ item.tableName }}</div>
          <div class="ys" style="margin-top: 10px;">{{ item.createBy }}({{ item.remark }})</div>
          <div class="ys clearfix">
            <time class="time">{{ item.createTime }}</time>
            <el-button type="text" class="button" @click="goto(item)">点检</el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  listTable
} from '@/api/rhtx/ExcelTable'
import {
  encrypt
} from './jjm'
import table from '@/assets/logo/table.png'
import table1 from '@/assets/logo/table1.png'
import table2 from '@/assets/logo/table2.png'

export default {
  name: 'RuoyiUiIndex',
  data() {
    return {
      encrypt,
      tableList: [],
      tableImgList: [table, table1, table2]
    }
  },

  mounted() {
    this.getListTable()
  },

  methods: {
    getListTable() {
      listTable().then(res => {
        this.tableList = res.rows
      })
    },
    getRandomInt(min, max) {
      min = Math.ceil(min)
      max = Math.floor(max)
      return Math.floor(Math.random() * (max - min + 1)) + min
    },
    goto(item) {
      this.$router.push({
        path: '/table/index/' + item.tableId,
        query: {
          szm: item.szm
        }
      }).then(r => {
        this.$store.dispatch('tagsView/setMeta', {
          meta: {
            title: item.tableName
          }
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .homePage {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 20px;

    .item {
      margin-bottom: 20px;
    }

    .box-card {
      margin: 5 10px;

      .content {
        font-size: 26px;

      }

      .ys {
        color: #999;
      }

      .clearfix {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
      }

      .image {
        width: 250px;
      }
    }
  }

</style>
